<!--test.vue-->
<template>
  <div style="width: 100%; height: 100%" ref="echartsBox">
    <!-- <span class="sub-text">范围：TOP10 <br />统计单位：套</span> -->
    <v-chart ref="echarts" class="chart" :option="option" :key="key" />
    <!-- <p class="bottom-text">2019/01/30—2020/01/30</p> -->
  </div>
</template>

<script>
export default {
  name: "baseBarChart",
  props: {
    baseBarChartForm: {
      type: Object,
      default: () => {
        const Obj = {
          animationDuration: 500,
          animationDurationUpdate: 3000, //就不生效2333
          //  animationDelayUpdate: 5000,
          xAxis: {
            type: "category",
            show: true,
            axisLine: {
              lineStyle: {
                color: "#818285"
              }
            },
            axisLabel: {
              color: "#818285",
              fontWeight: "normal",
              fontFamily: "Microsoft Yahei",
              fontSize: 13
            },
            data: [
              "上海",
              "深圳",
              "合肥",
              "成都",
              "安徽",
              "北京",
              "杭州",
              "长沙"
            ]
          },
          yAxis: {
            type: "value",
            show: true,
            min: "dataMin",
            max: "dataMax",
            splitNumber: 5,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              fontSize: 12,
              fontWeight: "normal",
              fontFamily: "Microsoft YaHei",
              color: "#000"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#000",
                type: "solid"
              }
            }
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 0, 0, 0.65)",
            borderColor: "rgb(51, 51, 51)",
            borderWidth: 0,
            textStyle: {
              color: "rgb(255, 255, 255)"
            }
          },
          series: [
            {
              itemStyle: {
                color: "#0a73ff"
              },
              data: [100, 75, 30, 65, 50, 70, 40, 62],
              type: "bar",
              barWidth: "",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)"
              },
              label: {
                show: true,
                position: "top",
                color: "#818285",
                fontWeight: "normal",
                fontFamily: "Microsoft Yahei",
                fontSize: 13
              }
            }
          ]
        };
        return Obj;
      }
    }
  },
  watch: {
    baseBarChartForm: {
      handler(val) {
        this.option = val;
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      option: {},
      key: 1
    };
  },
  mounted() {
    let MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let element = this.$refs["echartsBox"];
    this.observer = new MutationObserver(mutationList => {
      for (let mutation of mutationList) {
        console.log(mutation);
      }
      console.log("自适应");
      // this.$refs['echarts'].resize()
      this.key += 1;
    });
    this.observer.observe(element, {
      attributes: true,
      attributeFilter: ["style"],
      attributeOldValue: true
    });
  },
  beforeDestroyed() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer.takeRecords();
      this.observer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.sub-text {
  position: absolute;
  right: 20px;
  top: 5px;
  font-size: 14px;
  color: rgb(151, 151, 151);
  font-weight: bold;
  font-family: "Microsoft Yahei", Arial, sans-serif;
}
.bottom-text {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 20px;
  font-size: 14px;
  color: rgb(151, 151, 151);
}
</style>
